<template>
    <el-input v-model="startValue" :placeholder="sph" :type="type" class="search_key w100" clearable/>
    <span class="line">-</span>
    <el-input v-model="endValue" :placeholder="eph" :type="type" class="search_key w100" clearable />
</template>
<script setup>
    import { computed } from 'vue'
    const emit = defineEmits(['update:start','update:end']) //此处要完全对应，采用固定的update:prop属性
    const props = defineProps({
        start: { type: Number, require: true }, //注意外部要v-model:start绑定
        end: { type: Number, require: true },
        type: { type: String, require: true, default:"number" },
        sph: { type: String, default: "金额下限" },
        eph: { type: String, default: "金额上限" },
        width:  { type: Number, default: 226 },
    })

    let startValue = computed({
        get() { return props.start },
        set(val) {
            if(val == ""){
                emit('update:start', null)
            }else{
                if (!isNaN(val)) {
                    emit('update:start', Number(val)) //这里如不是这样，会报转换错误
                }else{
                    emit('update:start', null)
                }
            }
        }
    })
    let endValue = computed({
        get() { return props.end },
        set(val) {
            if(val == ""){
                emit('update:end', null)
            }else{
                if (!isNaN(val)) {
                    emit('update:end', Number(val)) //这里如不是这样，会报转换错误
                }else{
                    emit('update:end', null)
                }
            }
        }
    })
</script>

<style scoped lang="scss">
    .line { display: flex; justify-content: center; align-items: center; margin: 0 5px; font-weight: bold; }
</style>